<template>
    <h3>ToRefs</h3>
    <p>state.name {{state.name}}</p>
    <p>state.age {{state.age}}</p>
    <hr>
    <p>name {{name}}</p>
    <p>age {{age}}</p>
</template>

<script>
import {reactive,toRefs} from "vue"

export default {
    setup(props,context) {
        console.log('ToRefs setup',props,context);

        const state = reactive({
            name:"steve",
            age:18
        })

        // 将响应式对象state打散为一堆ref
        // const {name,age} = toRefs(state)

        setInterval(() => {
            state.age ++
        }, 1000);

        // 将响应式数据对象暴露给模板
        return {
            state,
            
            // name,
            // age

            // 将对象展开为一堆key-value
            ...toRefs(state)
        }
    }
}
</script>